<template>
  <div  :class="widthLevel > 1?'my-tag':'my-tag-mobile'">
    <!-- 头部信息 -->
    <div class="grey lighten-4">
      <!-- 标签 -->
      <div style="margin: 0 auto">
        <v-slide-group center-active  v-model="selected.tagsSelected">
          <v-slide-item v-for="tag in tags" style="margin: 3px 5px" :key="tag.tagId" v-model="tag.tagId" v-slot:default="{toggle, active}">
            <v-btn  class="mx-2 text-body-2 text-md-subtitle-2" :input-value="active"  active-class="light-blue white--text" depressed rounded @click="toggle">
              <span style="display: inline-block; margin-right: 5px">{{tag.tagName}}</span>
              <span>{{tag.articleNumber}}</span>
            </v-btn>
          </v-slide-item>
        </v-slide-group>
      </div>

      <!-- 分类 -->
      <div style="margin: 0 auto">
        <v-slide-group center-active  v-model="selected.classSelected">
          <v-slide-item v-for="item in classes" style="margin: 3px 5px" :key="item.classId" v-model="item.classId" v-slot:default="{toggle, active}">
            <v-btn  class="mx-2 text-body-2 text-md-subtitle-2" :input-value="active"  active-class="light-blue white--text" depressed rounded @click="toggle">
              {{item.name}}
            </v-btn>
          </v-slide-item>
        </v-slide-group>
      </div>

      <!-- 排序方式 -->
      <div style="margin: 0 auto">
        <v-slide-group center-active  v-model="selected.sortMethodSelected">
          <v-slide-item v-for="sortMethod in sortMethods" style="margin: 3px 5px" :key="sortMethod.sortMethodId" v-model="sortMethod.sortMethodId" v-slot:default="{toggle, active}">
            <v-btn  class="mx-2 text-body-2 text-md-subtitle-2" :input-value="active"  active-class="light-blue white--text" depressed rounded @click="toggle">
              {{sortMethod.name}}
            </v-btn>
          </v-slide-item>
        </v-slide-group>
      </div>
    </div>

    <!-- 文章内容 -->
    <div style="margin: 10px auto; padding: 5px 10px; display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-between; flex-grow: 1; flex-shrink: 1;" >
      <v-hover style="padding: 5px 15px; margin: 15px auto" v-for="item in articles" :key="item.articleId" v-slot:default="{hover}" :class="'my-home-article-'+widthLevel">
        <v-card :to="'/article/'+item.articleId" :elevation="hover?6:widthLevel>1?0:4" >
          <!-- 文章标题 -->
          <div style="display: flex; justify-content: space-between;margin-bottom: 10px">
            <div class="text-body-1 text-sm-h6  text-md-h5 font-weight-bold my-article-title">{{item.title}}</div>
            <v-card style="height: 32px; line-height: 32px; padding: 0 5px; color: white" :style="{'background-color':classColor[item.classId-1]}">{{item.className}}</v-card>
          </div>

          <!-- 基础信息 -->
          <div style="padding: 2px 5px; font-size: 14px;display: flex; justify-content: start; text-align: center">
            <div @click.stop.prevent="$router.push('/information')" style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-account</v-icon>虚光</div>
            <div style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-eye</v-icon>{{item.pageView}}</div>
            <div style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-thumb-up</v-icon>{{item.thumbNumber}}</div>
          </div>

          <!-- 文章简介 -->
          <div style="padding: 2px 5px 0; text-align: left; margin-top: 10px">
            <p class="text-lg-subtitle-1 my-article-description">
              {{item.description}}
            </p>
          </div>

          <!-- 文章标签 -->
          <div style="padding: 0 5px; display: flex; justify-content: space-between">
            <div class="my-article-title">
              <v-icon @click.stop.prevent="$router.push('/tag')">mdi-tag</v-icon>
              <v-hover v-for="tag in item.tags" :key="tag.tagId" v-slot:default="{hover}">
                <div @click.stop.prevent="$router.push('/tag/'+tag.tagId)" :class="hover?'blue--text':''" :key = "item.tagId" style="display: inline-block; padding: 2px 0; margin-right: 10px; text-decoration: underline">{{tag.tagName}}</div>
              </v-hover>
            </div>

            <div style="margin-right: 15px; height: 24px; line-height: 24px; font-size: 12px"><v-icon class="mr-1">mdi-calendar-blank-multiple</v-icon>{{item.time}}</div>
          </div>

        </v-card>
      </v-hover>
    </div>

    <!-- 分页 -->
    <div class="text-center">
      <v-pagination @input="getArticles()" v-model="pageInformation.pageNumber" style="border: none" :length="pageInformation.pageTotal" ></v-pagination>
    </div>

  </div>
</template>

<script>
import Http from "@/api/http";

export default {
  name: "Tag",


  data: ()=>{
    return {
      articles: [],               // 文章内容

      // 分页信息
      pageInformation: {
        pageNumber: 1,
        pageTotal: 15
      },

      classColor: [
        '#0b9c2f',
        '#d71515',
        '#2ab9d4',
        '#c9a034',
        '#afadad'
      ],

      tags: [],                   // 标签内容
      classes: [
        {
          classId: 0,
          name: "所有类型"
        },
        {
          classId: 1,
          name: "学习笔记"
        },
        {
          classId: 2,
          name: "采坑记录"
        },
        {
          classId: 3,
          name: "闲时杂谈"
        },
        {
          classId: 4,
          name: "转载记录"
        },
        {
          classId: 5,
          name: "其他文章"
        }
      ],             // 分类内容
      sortMethods: [
        {
          sortMethodId: 1,
          name: "最多浏览"
        },
        {
          sortMethodId: 2,
          name: "最多点赞"
        },
        {
          sortMethodId: 3,
          name: "最多评论"
        },
        {
          sortMethodId: 4,
          name: "最近更新"
        }
      ],         // 排序方式

      // 用于查询的消息
      selected: {
        tagsSelected: 0,
        sortMethodSelected: 1,
        classSelected: 0,
      }
    }
  },


  props: {
    widthLevel: Number
  },


  methods: {
    getArticles(){
      this.$emit("childloading", true);
      Http.get("/article/tag", {
        params: {
          "pageNumber": this.pageInformation.pageNumber,
          "pageTotal": 16,
          "sortMethod": this.selected.sortMethodSelected,
          "tagId": this.selected.tagsSelected,
          "classId": this.selected.classSelected
        }
      }).then(data=>{
        if(data.code == 1){
          this.articles = data.result.articles;
          this.pageInformation.pageTotal = data.result.totalPageNumber;
        }else {
          this.$emit("updateError",data.message);
        }
        this.$emit("childloading", false);
      }).catch(fail=>{
        this.$emit("updateError","服务端发生错误");
        console.error(fail);
        this.$emit("childloading", false);
      })
    }
  },


  watch: {
    /* 监听标签选项并进行文章获取 */
    selected: {
      handler(){
        this.$emit("childloading", true);
        Http.get("/article/tag", {
          params: {
            "pageNumber": 1,
            "pageTotal": 16,
            "sortMethod": this.selected.sortMethodSelected,
            "tagId": this.selected.tagsSelected,
            "classId": this.selected.classSelected
          }
        }).then(data=>{
          if(data.code == 1){
            this.articles = data.result.articles;
            this.pageInformation.pageTotal = data.result.totalPageNumber;
            this.pageInformation.pageNumber = 1;

            const myTimer = setInterval(function () {
              document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
              if (document.documentElement.scrollTop <= 0) {
                clearInterval(myTimer)
              }
            })
          }else {
            this.$emit("updateError",data.message);
          }
          this.$emit("childloading", false);
        }).catch(fail=>{
          this.$emit("updateError","服务端发生错误");
          console.error(fail);
          this.$emit("childloading", false);
        })
      },
      deep: true,
      immediate: false
    },

    /* 监控页数 */
    'pageInformation.pageNumber'() {
      const myTimer = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(myTimer)
        }
      })
    }
  },

  created() {
    this.$emit("childloading", true);

    // 2.获取数据
    // 获取标签
    Http.get("/tag/tags").then(data=>{
      if(data.code == 1){
        this.tags = data.result;
        if(this.$route.params.tagId != 0){
          this.selected.tagsSelected = this.$route.params.tagId;
          this.selected.sortMethodSelected = 1;
          this.selected.classSelected = 0;
        }else {
          this.selected.tagsSelected = this.tags[0].tagId;
          this.selected.sortMethodSelected = 1;
          this.selected.classSelected = 0;
        }
      }else {
        this.$emit("updateError",data.message);
      }
      this.$emit("childloading", false);
    }).catch(fail=>{
      this.$emit("updateError","服务端发生错误");
      console.error(fail);
      this.$emit("childloading", false);
    })

    // 2.添加监听
    this.$watch("$route.params.tagId", ()=>{
      if(this.$route.params.tagId == undefined){
        return ;
      }

      if(this.$route.params.tagId != 0){
        this.selected.tagsSelected = this.$route.params.tagId;
        this.selected.sortMethodSelected = 1;
        this.selected.classSelected = 0;
      }else {
        this.selected.tagsSelected = this.tags[0].tagId;
        this.selected.sortMethodSelected = 1;
        this.selected.classSelected = 0;
      }
    })



  }
}
</script>

<style scoped>
  .my-tag-mobile{
    margin: 0 auto 5px;
    padding: 0;
    text-align: center
  }
  .my-tag{
    margin: 5px 2px 5px;
    padding: 0;
    text-align: center
  }

  .my-home-article-1 {
    padding: 10px 7px;
    margin: 10px auto 0;
    width: 90%
  }
  .my-home-article-2 {
    padding: 15px 12px;
    margin: 15px 5px 0;
    flex-basis: 80%;
  }
  .my-home-article-3 {
    padding: 18px 14px;
    margin: 15px 5px 0;
    flex-basis: 42%;
  }

  .my-article-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .my-article-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 60%;
  }
</style>

<style>
  .v-main .v-slide-group.v-item-group > .v-slide-group__next, .v-main .v-slide-group.v-item-group > .v-slide-group__prev {
    display: none !important;
  }
</style>